<template>
  <view class="info-box">
    <view>订单详情</view>
    <view class="info-td number-td">
      <text>订单编号:</text>
      <view class="copy">{{orderInfo.order_sn}}
        <view @click="copybtn">复制</view>
      </view>
    </view>
    <view class="info-td">
      <text>订单价格:</text>
      <text style="color: #CC0022;">￥{{orderInfo.order_amount}}</text>
    </view>
    <view class="info-td">
      <text>下单时间:</text>
      <text>{{orderInfo.create_time}}</text>
    </view>
    <!-- <view class="info-td">
			<text>商品数量:</text>
			<text>x{{orderInfo.goods[0].goods_number}}</text>
		</view> -->
    <view class="info-td">
      <text>联系信息:</text>
      <text>{{orderInfo.delivery.receiver_name}} 先生</text>
    </view>
    <view class="info-td">
      <text>联系电话:</text>
      <text>{{orderInfo.delivery.receiver_phone}}</text>
    </view>
    <!-- <view class="number" v-if="orderInfo.order_state == 10">
			<view class="number-td">
				<text>订单编号:</text>
				<view class="copy">{{orderInfo.order_sn}}<view @click="copybtn">复制</view></view>
			</view>
			<view class="number-td">
				<text>支付方式:</text>
				<text>在线支付</text>
			</view>
		</view> -->
  </view>
</template>

<script>
  export default {
    props: {
      orderInfo: {
        type: Object,
        default: () => {}
      }
    },
    data() {
      return {

      }
    },
    methods: {
      copybtn() {
        uni.setClipboardData({
          data: this.orderInfo.order_sn,
        })
      }
    }
  }
</script>

<style lang="scss">
  .info-box {
    font-size: 28rpx;
    background-color: #fff;
    padding: 30rpx 24rpx;
    border-radius: 20rpx;
    margin-top: 20rpx;

    .info-td {
      margin-top: 30rpx;
      display: flex;
      justify-content: space-between;
      color: #999;
    }

    .number-td {
      display: flex;
      justify-content: space-between;
      color: #999;

      .copy {
        display: flex;

        view {
          font-size: 16rpx;
          padding: 6rpx 18rpx;
          border: 1px solid #999999;
          border-radius: 10rpx;
          margin-left: 10rpx;
        }
      }

      &:nth-child(1) {
        margin-top: 0;
      }
    }
  }
</style>